import { type CollectedBug, deleteCollectedBug, getCollectedBugs } from "@utils/bugCollection";
import { debounce } from "@utils/debounce";

export const bugCollectionModal = () => {
  const div = document.createElement("div");
  div.id = "bug_collection_vue_app";
  document.body.appendChild(div);

  const collectedBugs = getCollectedBugs();
  const { createApp, ref, h } = Vue;

  const app = createApp({
    template: `
      <n-modal v-model:show="showModal" preset="dialog" style="width: 60vw; height: 60vh">
        <template #header>
          <div>收藏列表</div>
        </template>
        <div>
          <n-flex vertical>
            <n-flex style="align-items: center;">
              <div style="width: 50px;">搜索：</div>
              <div style="400px;">
                <n-input v-model:value="inputValue" @input="onInput" type="text" placeholder="请输入搜索文本" />
              </div>
            </n-flex>
            <div>
              <n-data-table
                :columns="columns"
                :data="data"
                :bordered="true"
                max-height="calc(60vh - 170px)"
              />
            </div>
          </n-flex>
        </div>
      </n-modal>
    `,
    setup() {
      const showModal = ref(true);
      const inputValue = ref("");
      let data = ref<CollectedBug[]>(collectedBugs);
      const columns = ref<any[]>([
        {
          title: "ID",
          dataIndex: "id",
          key: "id",
          width: 100,
          render(row: any) {
            const id = (row.id as string).match(/(\d+)$/)?.[1] as string;
            return id;
          }
        },
        {
          title: "名称",
          dataIndex: "title",
          key: "title",
          width: "calc(60vw - 490px)",
          ellipsis: {
            tooltip: true
          }
        },
        {
          title: "URL",
          dataIndex: "url",
          key: "url",
          width: 200,
          ellipsis: {
            tooltip: true
          }
        },
        {
          title: "操作",
          key: "actions",
          width: 180,
          render: (row: any) => {
            return h(
              naive.NSpace,
              {
                horizontal: true
              },
              {
                default: () => [
                  h(
                    naive.NButton,
                    {
                      strong: true,
                      tertiary: true,
                      size: "small",
                      textContent: "打开",
                      onClick: () => window.open(row.url, "_blank")
                    }
                  ),
                  h(
                    naive.NButton,
                    {
                      strong: true,
                      tertiary: true,
                      size: "small",
                      textContent: "删除",
                      onClick: () => {
                        deleteCollectedBug(row.id);
                        data.value = getCollectedBugs();
                      }
                    }
                  )
                ]
              }
            );
          }
        }
      ]);

      const onInput = debounce((value: string) => {
        data.value = collectedBugs.filter((item: CollectedBug) => item.title.includes(value) || item.url.includes(value) ||item.id.includes(value));
      }, 500);

      return {
        showModal,
        inputValue,
        data,
        columns,
        onInput,
      }
    }
  });

  app.use(naive);
  app.mount("#bug_collection_vue_app");
}

